<template>
  <div class="student-dashboard">
    <h2>学生首页</h2>
    <div class="quick-section">
      <h3>快捷入口</h3>
      <el-row :gutter="12">
        <el-col :span="6" v-for="item in quick" :key="item.path">
          <div class="quick-box" @click="go(item.path)">
            <i :class="item.icon"></i>
            <span>{{ item.label }}</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: 'StudentDashboard',
  data() {
    return {
      quick: [
        { path: '/elective-courses', label: '选修课程', icon: 'el-icon-star-off' },
        { path: '/student-courses', label: '我的课程', icon: 'el-icon-notebook-1' },
        { path: '/student-timetable', label: '课表查询', icon: 'el-icon-date' },
        { path: '/student-grades', label: '成绩查询', icon: 'el-icon-data-analysis' },
        { path: '/student-profile', label: '信息维护', icon: 'el-icon-user' }
      ]
    }
  },
  methods: { go(p){ this.$router.push(p).catch(()=>{}) } }
}
</script>
<style scoped>
.student-dashboard { padding:16px; }
.quick-section { margin-top:12px; }
.quick-box { background:#f5f7fa; border:1px solid #e4e7ed; padding:16px; border-radius:8px; text-align:center; cursor:pointer; transition:.25s; margin-bottom:12px; }
.quick-box:hover { background:#409eff; color:#fff; border-color:#409eff; }
.quick-box i { display:block; font-size:28px; margin-bottom:6px; }
</style>
